<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>月末总结</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div class="boxTitle">
        <span @click="storeRevenue" class="titleStore" :class="{store:titleColor}">店铺交易</span>
        <span @click="staffRevenue" :class="{staff:staffColor}">员工交易</span>
      </div>
      <div>
        <router-view />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MonthEnd',
  data () {
    return {
      titleColor: null,
      staffColor: null,
      routerURL: window.location.href
    }
  },
  methods: {
    storeRevenue () {
      this.$router.push({ path: '/TurNover' }).catch(err => { return err })
    },
    staffRevenue () {
      this.$router.push({ path: '/StaffMon' }).catch(err => { return err })
    }
  },
  created () {
    this.bus.$off('titleColor')
    this.bus.$on('titleColor', val => {
      this.titleColor = val
      this.staffColor = !this.titleColor
    })
    this.bus.$off('staffColor')
    this.bus.$on('staffColor', val => {
      this.staffColor = val
      this.titleColor = !this.staffColor
    })
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin-top: 10px;
  height: calc(100vh - 130px);
  .boxTitle {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    .titleStore {
      margin-right: 20px;
    }
  }
}
.store {
  color: #4e88d2;
}
.staff {
  color: #4e88d2;
}
</style>
